<div id="accordion">
<div class="card">
    <div class="card-header">
        <h4 class="card-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseGroups">Groups</a></h4>
        <div class="card-tools">
            <span id="groups-count" data-toggle="tooltip" title="?" class="badge bg-primary">?</span>
            <button id="groups-api" type="button" class="btn btn-tool">API</button>
        </div>
    </div>
    <div id="collapseGroups" class="panel-collapse collapse in">
    <div class="card-body p-0">
        <table id="groups-table" class="table table-sm table-hover table-striped table-head-fixed">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>ICPC Id</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Hidden</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    </div>
</div>
</div>
<script type="text/html" id="groups-template">
  <td><a href="{{api}}">{{id}}</td>
  <td>{{icpc_id}}</td>
  <td>{{name}}</td>
  <td>{{type}}</td>
  <td>{{hidden}}</td>
</script>
<script type="text/javascript">
registerContestObjectTable("groups");

$(document).ready(function () {
    $.when(contest.loadGroups()).done(function () {
        fillContestObjectTable("groups", contest.getGroups())
    }).fail(function (result) {
    	console.log("Error loading groups: " + result);
    });
});
</script>